<template>
  <view class="mx-32 mt-32">
    <u-cell-group :border="false">
      <u-cell title="姓名">
        <template #value>
          <u-input
            placeholder="请输入姓名"
            border="none"
            v-model="addressInfo.contact"
            input-align="right"></u-input>
        </template>
      </u-cell>
      <u-cell title="手机号">
        <template #value>
          <u-input
            placeholder="请输入手机号"
            border="none"
            v-model="addressInfo.phone"
            input-align="right"></u-input>
        </template>
      </u-cell>
      <u-cell title="所在地" :isLink="true">
        <template #value>
          <view @click="showSelect = true">
            <u-input
              placeholder="请选择所在地"
              border="none"
              readonly
              v-model="addressInfo.address"
              input-align="right"></u-input>
          </view>
        </template>
      </u-cell>
      <u-cell title="详细地址" :border="false">
        <template #value>
          <u-input
            input-align="right"
            placeholder="请输入详细地址"
            v-model="addressInfo.addressDetail"
            border="none"></u-input>
        </template>
      </u-cell>
    </u-cell-group>
    <view class="u-m-t-24">
      <u-cell title="设为默认地址" :border="false">
        <template #value>
          <u-switch
            activeColor="#ff8f44"
            v-model="switchVal"
            @change="changeDefault"></u-switch>
        </template>
      </u-cell>
    </view>
    <view style="margin-top: 272rpx">
      <u-button
        type="primary"
        color="#FF8F44"
        @click="saveAddress"
        :custom-style="{ height: '96rpx' }"
        >保存</u-button
      >
      <u-button type="primary" @click="back" :custom-style="{ height: '96rpx' }"
        >返回</u-button
      >
    </view>
    <cityPicker
      :column="column"
      :default-value="defaultValue"
      :mask-close-able="showSelect"
      @confirm="selectArea"
      @cancel="showSelect = false"
      :visible="showSelect" />
  </view>
</template>

<script setup>
import cityPicker from "../components/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker";
// import { addAdderssApi, getAdderssInfoApi, editAddressApi } from "@/api/pagesA";
// 省市县选择
let column = ref(3);
let defaultValue = ref("");
let showSelect = ref(false);
// 默认开关
let switchVal = ref(false);
// 地址信息
let addressInfo = ref({
  address: "",
  addressDetail: "",
  contact: "",
  phone: "",
  isDefault: 0,
});
let id = ref("");
let isEdit = ref(false);
// 选择地址
const selectArea = (data) => {
  addressInfo.value.address = `${data.provinceName}-${data.cityName}-${data.areaName}`;
  showSelect.value = false;
};
// 新增/修改地址
const saveAddress = () => {};
// 默认地址
const changeDefault = (e) => {
  addressInfo.value.isDefault = e ? 1 : 0;
};
// 获取详情
const getAddressInfo = (id) => {
  // getAdderssInfoApi({ id }).then((res) => {
  //   console.log("res: ", res);
  //   if (res.success) {
  //     let info = mergeSameProperties(addressInfo.value, res.result);
  //     addressInfo.value = info;
  //     res.result.isDefault == 1
  //       ? (switchVal.value = true)
  //       : (switchVal.value = false);
  //     defaultValue.value = info.address.split("-");
  //   }
  // });
};
const back = () => {
  uni.navigateBack({
    delta: 1,
    success: () => {
      uni.$sc.getBackPage("test");
      // const page = uni.$sc.getBackPage();
      // page.$vm.$.exposed.test();
    },
  });
};
onLoad((param) => {
  // if (param.isEdit) {
  //   isEdit.value = param.isEdit;
  //   id.value = param.id;
  //   getAddressInfo(param.id);
  // }
});
</script>
<style lang="scss">
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.radio-con {
  padding: 10px 15px;
  background-color: #fff;
  ::v-deep .u-radio-label--right {
    width: 100%;
  }
}
.footer {
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 30rpx;
  width: 100%;
  padding: 8rpx 32rpx;
  box-sizing: border-box;
}
</style>
